<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更改密码</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div id="mes" style="padding-top: 20px;padding-left: 20px">
        <template>
            <el-form ref="formData"  :rules="rules" label-width="80px" :model="formData">
                <el-form-item label="旧密码" prop="oldpass">
                    <el-input v-model="formData.oldpass"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass">
                    <el-input v-model="formData.newpass"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass2">
                    <el-input v-model="formData.newpass2"></el-input>
                </el-form-item>

                <el-button type="success" @click="changepass">提交修改</el-button>
            </el-form>
        </template>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            formData: {},
            newpass2: '',
            rules: {
                oldpass: [{required: true, message: '请输入旧密码', trigger: 'blur'},
                    {min: 8, max: 16, message: '密码长度为8-16位', trigger: 'blur'}],
                newpass: [{required: true, message: '请输入新密码', trigger: 'blur'},
                    {min: 8, max: 16, message: '新密码长度在8-16位', trigger: 'blur'}],
                newpass2: [{required: true, message: '请输入新密码', trigger: 'blur'},
                    {min: 8, max: 16, message: '新密码长度在8-16位', trigger: 'blur'}]
            },
        },
        methods: {
            changepass() {
                //验证表单
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        //判断两次输入的新密码是否一致
                        if (this.formData.newpass === this.formData.newpass2) {
                            axios.post("/user/changepass",this.formData).then((res) => {
                                if (res.data.flag) {
                                    //修改陈工
                                    this.$message.success(res.data.message);
                                } else {
                                    //失败
                                    this.$message.error(res.data.message);
                                }
                            })
                        } else {
                            //不一致
                            this.$message.error("两次输入的密码不一致，请重新输入");
                        }
                    } else {
                        this.$message.error("表单验证失败，请检查");
                    }
                })
            }
        }
    })
</script>
</html>